<template>
    <div class="_container">
        <div class="_table_box">
            <el-table class="_table" v-bind="$attrs" ref="table" border :data="data" height="100%" @selection-change="handleSelectionChange" size="small">
                <el-table-column type="selection" align="center" width="50" v-if="showSelection" />
                <el-table-column label="序号" width="60" align="center" v-if="showCurrent">
                    <template #default="scope">
                        {{ (page.current - 1) * page.size + scope.$index + 1 }}
                    </template>
                </el-table-column>

                <slot />
            </el-table>

            <div class="_table_extra" v-if="$slots.extra">
                <slot name="extra" />
            </div>
        </div>

        <div class="_table_page flex-row justify-start align-center">
            <el-pagination v-if="showPage" v-model:current-page="page.current" :background="true" small background
                :layout="pageLayout" :pager-count="5" :total="page.total" :page-size="page.size" :page-sizes="pageSizes"
                @current-change="handleCurrentChange" @size-change="handleSizeChange" />
        </div>
    </div>
</template>

<script setup>
import { onActivated, ref } from "vue"

const props = defineProps({
    // 数据源
    data: {
        type   : Array,
        default: () => [],
    },
    // 已选择的数据，与selection结合使用
    select: {
        type   : Array,
        default: () => [],
    },
    // 是否展示index选择，默认否
    showCurrent: {
        type   : Boolean,
        default: false,
    },
    // 是否展示选择框，默认否
    showSelection: {
        type   : Boolean,
        default: false,
    },
    // 是否展示页级组件，默认是
    showPage: {
        type   : Boolean,
        default: true,
    },
    // 分页参数
    page: {
        type   : Object,
        default: () => {
            return {
                current: 1,
                size   : 20,
                total  : 0,
            }
        },
    },
    // 分页需要显示的东西，默认全部
    pageLayout: {
        type   : String,
        default: "total, sizes, prev, pager, next, jumper",
    },
    pageSizes : {
        type   : Array,
        default: [ 10, 15, 20, 50, 100 ],
    },
})

const table = ref(null)
let timer   = null

const emits               = defineEmits([ "getTableData", "selection-change" ])
// 分页相关：监听页码切换事件
const handleCurrentChange = (val) => {
    if(timer){
        props.page.current = 1
    }
    else{
        props.page.current = val
        emits("getTableData")
    }
}

// 分页相关：监听单页显示数量切换事件
const handleSizeChange = (val) => {
    timer = "work"
    setTimeout(() => {
        timer = null
    }, 100)
    props.page.size = val
    emits("getTableData", true)
}

// 选择监听器
const handleSelectionChange = (val) => {
    emits("selection-change", val)
}

// 解决BUG：keep-alive组件使用时，表格浮层高度不对的问题
onActivated(() => {
    table.value.doLayout()
})
</script>

<style lang="scss" scoped>
._container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;

    ._table_box {
        height: calc(100% - 50px);
        display: flex;
        flex-direction: row;
        width: 100%;

        ._table {
            flex: 1;
        }

        ._table_extra {
            flex: 1;
            padding: 10px;
            border: 1px solid #ebeef5;
        }
    }

    ._table_page {
        width: 100%;
        height: 50px;
        background: #f3f0f0;
        padding: 0 5px;
    }
}
</style>
